<script setup>
import { computed, ref } from 'vue'
import { projectDetailVisible, projectInfoSelected } from '@/views/new-screen/components/ProjectDetailStore.js'

const props = defineProps({
  data: Object,
})

const handleProjectDetail = (data) => {
    projectDetailVisible.value = true
    projectInfoSelected.value = data.pkid
    console.log('handleProjectDetail pkid', data.pkid)
}

const getPriceW = (num) => {
    return parseFloat((num / 10000).toFixed(2))
}
</script>

<template>
    <div class="info-card" @click.native="handleProjectDetail(data)">
        <div class="tr">
        <div class="name td">
            {{ data.projectName }}
        </div>
        <div class="tag td">
            {{ data.projectStage }}
        </div>
        </div>
        <div class="tr">
            建设：{{ data.investmentUnit }}
        </div>
        <div class="tr">
            设计：{{ data.designUnit }}
        </div>
        <div class="tr">
            施工：{{ data.constructionUnit }}
        </div>
        <div class="tr">
            造价：{{ getPriceW(data.projectCostPrice) }} 万元
            <span class="location">定位</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.info-card {
    width: 100%;
    height: 200px;
    background: #02143866;
    border: 1px solid #15294A;
    border-radius: 4px;
    margin-bottom: 10px;
    .tr {
        display: flex;
        align-items: center;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        padding-right: 10px;
        .td {
            flex: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            word-break: break-all;
            padding: 0 4px;
        }
        .name {
            flex: 7;
        }
    }
    .name {
        color: #03A3F2;
    }
    .tag {
        width: 4em;
        height: 32px;
        line-height: 32px;
        border-radius: 20px;
        text-align: center;
        background: #0A395D;
        border: 1px solid #2978B1;
    }
    .location {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #0A395D;
        border: 1px solid #2978B1;
        margin-left: auto;
    }
}
</style>